import React, { FC, useRef } from 'react';
import ProTable, { ProColumns, ActionType } from '@/components/ProTable';
import styles from './index.less';
import IconFont from '@/components/IconFont';
import useHoxModel from '../../../../useHoxModel';
import { Dropdown, Modal, Menu, message } from 'antd';
import ConfirmProps from '@/components/CommonModal/Confirm';
import { ConfigPermissionRecordReturnType } from '@/pages/Authority/API';
const { confirm } = Modal;

interface CardProps {
  // actionRef: React.MutableRefObject<ActionType | undefined>;
  currentPageType: string;
  info: { id?: number };
}
const ToolBar = () => {
  return <div></div>;
};

const BlankCard: FC<CardProps> = ({ info, currentPageType }) => {
  const actionRef = useRef<ActionType>();
  const {
    getDoorConfigPermissionRecord,
    getUserConfigPermissionRecord,
    deletePermission,
    addPermission,
  } = useHoxModel((model) => [model.info, model.currentPageType]);
  const menu = (record: { id: number; result?: number }) => {
    const onClick = async ({ key }: { key: string }) => {
      const id = currentPageType === 'user' ? 'doorId' : 'userId';

      const userIds = currentPageType === 'user' ? info?.id?.toString() : record[id].toString();
      const doorIds = currentPageType === 'door' ? info?.id?.toString() : record[id].toString();
      switch (key) {
        case 'issuingAuthority':
          confirm({
            ...new ConfirmProps('是否要下发权限?', ' '),
            async onOk() {
              const res = await addPermission({ userIds, doorIds });
              if (res?.result === 0) {
                message.success('下发权限成功！');
                actionRef.current?.reload();
              }
            },
          });

          break;
        case 'cancelIssuingAuthority':
          confirm({
            ...new ConfirmProps('是否要删除权限?'),
            async onOk() {
              const res = await deletePermission({ userIds, doorIds });
              if (res?.result === 0) {
                message.success('删除权限成功！');
                actionRef.current?.reload();
              }
            },
          });
          break;
      }
    };
    if (record?.result === 1) {
      return (
        <Menu>
          <Menu.Item key={'no-data'}>
            <span style={{ color: 'rgba(0,0,0,0.25)' }}>暂无操作</span>
          </Menu.Item>
        </Menu>
      );
    }
    return (
      <Menu onClick={onClick}>
        <Menu.Item key={'issuingAuthority'}>
          <IconFont type={'iconxiafa'} style={{ fontSize: '14px' }} />
          <span>下发权限</span>
        </Menu.Item>
        <Menu.Item key={'cancelIssuingAuthority'}>
          <IconFont type={'iconshanchu1'} style={{ fontSize: '14px' }} />
          <span>取消权限</span>
        </Menu.Item>
      </Menu>
    );
  };

  const columns: ProColumns<ConfigPermissionRecordReturnType>[] = [
    {
      title: currentPageType === 'user' ? '门名称' : '用户名称',
      dataIndex: currentPageType === 'user' ? 'doorName' : 'userName',
      align: 'center',
    },
    {
      title: '操作类型',
      align: 'center',
      dataIndex: 'type',
      valueEnum: {
        1: { text: '卡片权限上传' },
        2: { text: '取消卡片权限' },
        3: { text: '人脸权限上传' },
        4: { text: '取消人脸权限' },
      },
    },
    {
      title: '状态',
      align: 'center',
      dataIndex: 'result',
      valueEnum: {
        0: { text: '下发失败' },
        1: { text: '正常' },
      },
      render: (text: React.ReactNode) => {
        return (
          <>
            <span className={true ? styles['online'] : styles['offline']}>{text}</span>
          </>
        );
      },

      hideInSearch: true,
    },
    {
      title: '操作',
      key: 'option',
      width: '10%',
      valueType: 'option',
      render: (_, record, index) => [
        <Dropdown overlay={menu(record)} key={index.toString(36) + index}>
          <a key={'loss'} className={styles['operation']}>
            <IconFont type={'iconcaozuo2'} style={{ fontSize: '16px' }} />
          </a>
        </Dropdown>,
      ],
    },
  ];
  return (
    <div className={styles['container']}>
      <ProTable<ConfigPermissionRecordReturnType>
        columns={columns}
        request={async (params: { [key: string]: any }) => {
          let data = null;
          if (currentPageType === 'door') {
            data = await getDoorConfigPermissionRecord({
              keyword: params.keyword || undefined,
              number: params.pageSize,
              id: Number(info?.id),
              page: params.current,
              result: params.result || undefined,
            });
          } else {
            data = await getUserConfigPermissionRecord({
              keyword: params.keyword || undefined,
              number: params.pageSize,
              id: Number(info?.id),
              page: params.current,
              result: params.result || undefined,
            });
          }
          return await {
            data: data?.list || [],
            success: true,
            total: data?.count || 0,
          };
        }}
        rowKey="id"
        search={false}
        options={{
          search: {
            name: 'keyword',
          },
          fullScreen: false,
          setting: false,
        }}
        tableAlertRender={false}
        actionRef={actionRef}
        dateFormatter="string"
        headerTitle={false}
        toolBarRender={() => [<ToolBar />]}
      />
    </div>
  );
};
export default BlankCard;
